<!--
 * @Author: 宋杰
 * @Date: 2021-01-14 15:30:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-28 16:33:18
 * @Description: 一家十一口(猜一字) 管理员端框架
-->
<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="log">
          <img src="../../../static/img/Mhed.png" />
        </div>
        <div class="loR">
          <el-dropdown
            class="avatar-container right-menu-item hover-effect"
            trigger="click"
          >
            <div class="avatar-wrapper">
              <img src="../../../static/img/touxiang.png" style="width: 40px" />
              <span style="color: #fff">王强</span>
              <i style="color: #fff" class="el-icon-caret-bottom" />
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="logout">
                <span style="display: block">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="position"
            text-color="#000"
            background-color="#fff"
            class="el-menu-vertical-demo nav_menu"
            @open="handleOpen"
            @close="handleClose"
            :unique-opened="true"
            :router="true"
            :collapse="isCollapse"
          >
            <!-- 审核汇总 -->
            <el-submenu index="审核汇总">
              <template slot="title">
                <i class="iconfont iconshenhe"></i>
                <span>审核汇总</span>
              </template>
              <el-menu-item index="/assessmentAudit" @click="btnClick(1)">
                <i class="el-icon-menu"></i>
                评估审核
              </el-menu-item>
              <el-menu-item index="/RegistrationAudit" @click="btnClick(2)">
                <i class="el-icon-menu"></i>
                注册审核
              </el-menu-item>
            </el-submenu>
            <!--机构管理-->
            <el-submenu index="机构管理">
              <template slot="title">
                <i class="iconfont iconjigouguanli"></i>
                <span slot="title">机构管理</span>
              </template>
              <el-menu-item
                index="/OrganizationManagement"
                @click="btnClick(3)"
              >
                <i class="el-icon-menu"></i>
                机构管理
              </el-menu-item>

              <el-menu-item index="/CIInstitutions" @click="btnClick(4)">
                <i class="el-icon-menu"></i>
                信用一览
              </el-menu-item>

              <!-- <el-submenu index="信用一览">
                <template slot="title">
                  <i class="iconfont"></i>
                  <i class="el-icon-menu"></i>
                  <span slot="title">信用一览</span>
                </template>
                <el-menu-item index="/CIInstitutions" @click="btnClick(4)">
                  <i class="el-icon-menu"></i>
                  按机构
                </el-menu-item>
                <el-menu-item
                  index="/CIEvaluationactivity"
                  @click="btnClick(5)"
                >
                  <i class="el-icon-menu"></i>
                  按评价活动
                </el-menu-item>
              </el-submenu> -->
            </el-submenu>
            <!--信用评价-->
            <el-submenu index="信用评价">
              <template slot="title">
                <i class="iconfont iconxinyongpingjia"></i>
                <span slot="title">信用评价</span>
              </template>
              <el-menu-item index="/EvaluationOpening" @click="btnClick(6)">
                <i class="el-icon-menu"></i>
                评估开放
              </el-menu-item>
              <el-menu-item index="/AssessmentOpenDetails" @click="btnClick(7)">
                <i class="el-icon-menu"></i>
                待评估审核申请
              </el-menu-item>
              <el-menu-item index="/CreditComplaint" @click="btnClick(8)">
                <i class="el-icon-menu"></i>
                信用申诉
              </el-menu-item>
            </el-submenu>
            <!--分值标准-->
            <el-submenu index="分值标准">
              <template slot="title">
                <i class="iconfont iconfenzhibiaozhun"></i>
                <span slot="title">分值标准</span>
              </template>
              <el-menu-item index="/ScoreStandard" @click="btnClick(9)">
                <i class="el-icon-menu"></i>
                分值标准
              </el-menu-item>
            </el-submenu>
            <!--账号管理-->
            <el-submenu index="账号管理">
              <template slot="title">
                <i class="iconfont iconzhanghaoguanli"></i>
                <span slot="title">账号管理</span>
              </template>
              <el-menu-item index="/AccountManagement" @click="btnClick(10)">
                <i class="el-icon-menu"></i>
                账号管理
              </el-menu-item>
            </el-submenu>
            <!--通知公告-->
            <el-submenu index="通知公告">
              <template slot="title">
                <i class="iconfont icontongzhigonggao"></i>
                <span slot="title">通知公告</span>
              </template>
              <el-menu-item index="/Announcements" @click="btnClick(11)">
                <i class="el-icon-menu"></i>
                通知公告
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--面包导航-->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/assessmentAudit' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item v-if="positioncA !== ''">
              {{ positioncA }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="positioncB !== ''">
              {{ positioncB }}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="positionc !== ''">{{
              positionc
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <br />
          <!--router-view路由视图处-->
          <el-card class="box-card">
            <router-view />
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      position: "1",
      positioncA: "",
      positioncB: "",
      positionc: "",
      isCollapse: false
    };
  },
  mounted() {
    this.position = this.$route.path;
  },
  beforeUpdate() {
    // this.position = this.$route.path;
    // if (this.$route.path === "/chart") {
    //   this.positioncA = "饼状图表";
    //   this.positionc = "";
    // } else if (this.$route.path === "/") {
    //   this.positioncA = "用户管理";
    //   this.positionc = "用户列表";
    // }
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    //退出
    async logout() {
      //  this.$router.push(`/`);
      // },

      // this.$router.push(`/`)
       //全局存储token
      window.sessionStorage.clear()
      console.log("window.sessionStorage登出", window.sessionStorage);
      
      this.$router.push(`/`);
      location.reload()//退出时刷新页面清除 this.$router.addRoutes();添加的动态路由的缓存 （不是最优解）
    },
    // 切换
    btnClick(val) {
      this.positioncA = "";
      this.positioncB = "";
      this.positionc = "";
      if (val == 1) {
        this.$router.push("assessmentAudit");
        this.positioncA = "审核汇总";
        this.positionc = "评估审核";
      } else if (val == 2) {
        this.$router.push("RegistrationAudit");
        this.positioncA = "审核汇总";
        this.positionc = "注册审核";
      } else if (val == 3) {
        this.$router.push("OrganizationManagement");
        this.positioncA = "机构管理";
        this.positionc = "机构管理";
      } else if (val == 4) {
        this.$router.push("CIInstitutions");
        this.positioncA = "机构管理";
        // this.positioncB = "信用一览";
        this.positionc = "信用一览";
      } else if (val == 5) {
        // 去除
        // this.$router.push("CIEvaluationactivity");
        // this.positioncA = "机构管理";
        // this.positioncB = "信用一览";
        // this.positionc = "按评价活动";
      } else if (val == 6) {
        this.$router.push("EvaluationOpening");
        this.positioncA = "信用评价";
        this.positionc = "信用评估一览";
      } else if (val == 7) {
        this.$router.push("AssessmentOpenDetails");
        this.positioncA = "信用评价";
        this.positionc = "待评估审核申请";
      } else if (val == 8) {
        this.$router.push("CreditComplaint");
        this.positioncA = "信用评价";
        this.positionc = "信用申诉";
      } else if (val == 9) {
        this.$router.push("ScoreStandard");
        this.positioncA = "分值标准";
        this.positionc = "分值标准";
      } else if (val == 10) {
        this.$router.push("AccountManagement");
        this.positioncA = "账号管理";
        this.positionc = "账号管理";
      } else if (val == 11) {
        this.$router.push("Announcements");
        this.positioncA = "通知公告";
        this.positionc = "通知公告";
      }
    }
  }
};
</script>

<style scoped>
.log {
  position: fixed;
  left: 0;
}
.loR {
  position: fixed;
  right: 0;
  margin-right: 20px;
}
.el-header {
  width: 100%;
  height: 16vh;
  background: #2276c3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  /* position: relative; */
  /* span {
    font-size: 25px;
  } */
}

@media screen and (max-width: 1200px) {
  .el-header {
    width: 100%;
    height: 25vh;
    background: 2276c3;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* span {
      font-size: 25px;
    } */
  }
}

@media screen and (max-width: 700px) {
  .el-header {
    width: 100%;
    height: 22vh;
    background: #2276c3;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* span {
      font-size: 25px;
    } */

    /* .el-breadcrumb /deep/.el-breadcrumb__item {
      font-size: 14px !important;
    } */
  }
}

.el-aside {
  /* height: 90vh; */
  background: #fff;
  margin-top: 62px;
  position: fixed;
  z-index: 999;
}

.logo {
  display: flex;
  align-items: center;
  /* height: 80px; */
  color: #fff;
  font-size: 18px;
  justify-content: space-around;
}

.home_container {
  height: 100%;
}
.home {
  height: 100%;
}

.grid-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  position: relative;
}

.home_header_flex {
  display: flex;
  /* align-items: center; */
  margin-top: 10px;
  /* h2 {
    margin-left: 20px;
  } */
}

.loginout {
  position: absolute;
  top: 12%;
  right: 20px;
  background: #fff;
  border: 1px solid #fff;
  color: #fff;
}
.home_header {
  background: #fff;
  color: #fff;
  /* height: 80px !important; */
}

.el-main {
  background-color: #ffffff;
  color: #fff;
  text-align: center;
  /* margin-left: 12%; */
  /* margin-top: 3%; */
  margin-left: 200px;
  margin-top: 60px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item.is-active {
  background-color: #fff !important;
  color: #909399;
}
.el-menu-item.is-active span {
  color: #fff !important;
}
</style>
